<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/vue.min.js"></script>

</head>

<body>

<div id="app">

<!--    没有渲染效果-->

    {{link}}

    <p v-html="link"></p>

<p>num是一个{{num%2==0?'偶数':'奇数'}}</p>

<!--  js还有一种运算符,三元运算符,类似于python里面的三元表达式

        三元运算符的语法:

         判断条件 ? 条件为true : 条件为false的结果

        python 三元表达式[三目运算符]的语法:

        a if 条件 else b

-->

<!--    + 有字符串拼接的效果,so,要-0-->

    <p>num的下一个整数{{num-0+1}}</p>

    <!--倒序显示-->

    <p>{{message.split('').reverse().join('')}}</p>

    <!--message正序显示-->

    <input type="text" v-model="message">

</div>

<script>

    var vm = new Vue({

        el: "#app",  // 设置vue对象控制的标签范围

        data: {   // vm对象使用的数据

            link: '<a href="https://www.baidu.com/?tn=96928074_hao_pg">百度</a>',

            num: '100',

            message: "abcdef",

        }

    })

</script>

</body>

</html>